<template>
  <div class="layout-all">
    <control :config="config" />
    <div class="layout-header" style="float:left">
      <el-button
        v-if="money-do_money>0"
        type="primary"
        @click="dialogVisible = true"
      >申请提现</el-button>
    
    </div>
    <div class="form-row"><div class="layout-money">余额<el-tag class="layout-money">{{money}}</el-tag></div>
      <div class="layout-money">申请中金额<el-tag class="layout-money" type="danger">{{do_money}}</el-tag></div></div>
    
    <div class="layout-content">
      <el-table
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%;margin-top:50px"
      >
        <!-- <el-table-column
          type="selection"
          width="55"
        /> -->
        <el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
        <el-table-column align="center" prop="real_name" label="真实姓名" width="250" />
        <el-table-column align="center" prop="money" label="提现金额" width="100" />
        <el-table-column align="center" prop="extract_way" label="提现方式" width="100" />
        <el-table-column align="center" prop="code" label="卡号账号" width="150" />
        <el-table-column align="center" prop="status" label="审核状态" width="150">
          <template slot-scope="scope">
            <el-tag
              :type="status_arr_type[scope.row.status]"
              disable-transitions
            >{{scope.row.status_str}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" label="备注" />
        <el-table-column align="center" prop="reply_remark" label="回复备注" width="350" />
        <el-table-column
          align="center"
          prop="telephone"
          fixed="right"
          width="140"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
            size="small"
              v-if="scope.row.status === 0"
              type="danger"
              icon="el-icon-delete"
              @click="onDel(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="申请提现"
      :visible.sync="dialogVisible"
      :width="isMobile()?'80%':'30%'"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="真实姓名:" prop="real_name">
          <el-input v-model="form.real_name" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="提现金额:" prop="money">
          <el-input v-model="form.money" placeholder="请输入提现金额" />
          <div>最大提现:{{money-do_money}}元</div>
        </el-form-item>
        <el-form-item label="提现方式:" prop="extract_way">
          <el-input v-model="form.extract_way" placeholder="请输入提现方式" />
        </el-form-item>
        <el-form-item label="账号:" prop="code">
          <el-input v-model="form.code" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onApply('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import control from '../../components/control/control'
export default {
  components: { control },
  data() {
    return {
      config: [
        { type: 'text', placeholder: '请输入姓名', field: 'real_name', val: '' }
      ],
      type: 0,
      dialogVisible: false,
      form: {
        real_name: '',
        money: '',
        extract_way: '',
        code: '',
        remark: ''
      },
      status_arr_type: ['primary','success','warning','info'],
      value: '',
      money: '',
      do_money: '',
      selection: [],
      searchWhere: {},
      tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14,
      rules: {
        real_name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入提现金额', trigger: 'blur' }
        ],
        extract_way: [
          { required: true, message: '请输入提现方式', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ]
      }
    }
  },
  activated(){
    // if(this.$getUpdate()){
      this.onSearch()
    // }
  },
  created() {
    this.onSearch()
  },
  methods: {
    // 查询
    handleSelectionChange(val) {
      this.selection = []
      val.forEach(e => {
        this.selection.push(e.id)
      })
    },
    handleSizeChange(val) {
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.onSearch()
    },
    onSearch() {
      const form = {}
      form.page = this.current_page
      form.map = this.searchWhere
      this.get('/shop/Extract/index', form, 'POST').then(e => {
        this.tableData = e.list.data
        this.per_page = e.list.per_page
        this.total = e.list.total
        this.current_page = e.list.current_page
        this.money=e.money
        this.do_money=e.do_money
      })
    },

    // 删除
    onDel(id) {
      this.$msg_confirm().then(e => {
        if (e) {
          this.get('/shop/Extract/del?id=' + id, this.form, 'POST').then(e => {
            this.onSearch()
          })
        }
      })
    },
    // 申请审核
    onApply(formName) {
      if(this.form.money<=0){
        this.$msg_ok('error','请输入正确的金额')
        return
      }
      console.log(this.money-this.do_money)
      if(this.form.money>this.money-this.do_money){
        this.$msg_ok('error','余额不足,当前有未完成提现'+this.do_money+'元')
        return
      }
      this.$refs[formName].validate(valid => {
        this.get('/shop/Extract/apply_extract', this.form, 'POST').then(e => {
          this.onSearch()
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        })
      })
    }
  }
}
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.layout-money {
  margin:0 10px;
}
</style>
